<template>
  <div class="chat-input-container">
    <!-- 查询按钮 -->
    <button @click="toggleOptions" class="query-button">更多</button>

    <!-- 输入框 -->
    <input
      v-model="inputMessage"
      type="text"
      class="message-input"
      placeholder="请输入信息..."
      @keyup.enter="send"
    />
    
    <!-- 发送按钮 -->
    <button @click="send" class="send-button">发送</button>

    <!-- 上拉选项框 -->
    <div v-if="isOptionsVisible" class="options-box">
      <button @click="selectOption(1)" class="option-button">获取最新拼友信息</button>
      <button @click="selectOption(2)" class="option-button">“我们要出发啦！”</button>
      <button @click="selectOption(3)" class="option-button">返回</button>
    </div>
  </div>
</template>

<script>
import { ChatAPI, UserAPI,PinlistAPI} from "../../services/api";  // 引入 ChatAPI
export default {
  name: "ChatInput",
  props: {
    pinID: {
      type: Number,
      required: true,
    },
    userID: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      inputMessage: "",
      isOptionsVisible: false, // 控制选项框显示与隐藏
    };
  },
  methods: {
    send() {
      if (this.inputMessage.trim()) {
        this.$emit("sendMessage", this.inputMessage);
        this.inputMessage = "";
      }
    },
    // 切换选项框显示与隐藏
    toggleOptions() {
      this.isOptionsVisible = !this.isOptionsVisible;
    },
	sendMessage(sender,message){
	  const chatData = {
		pinID: this.pinID,
		userID: sender, // 当前用户ID，需要动态获取
		messageContent: message,
	  };
	  ChatAPI.createChat(chatData)
		.then((response) => {
		  console.log("Message sent successfully:", response);
		})
		.catch((error) => {
		  console.error("Failed to send message:", error);
		});
	},
    // 选项按钮点击事件
    async selectOption(option) {
      console.log('选中选项:', option);
      this.$emit("selectOption", option);
      this.isOptionsVisible = false; // 选项选择后隐藏选项框
	  if (option==2){
		  this.sendMessage(this.userID,"我们要出发啦！");
	  }
	  else
	  {
		    // 获取 Pin 信息
		    this.pinInfo = await PinlistAPI.getPinById(this.pinID);
		    this.leaderInfo = await UserAPI.getUserById(this.pinInfo.leader);
		
		    let members = [];
		    try {
		      members = JSON.parse(this.pinInfo.members);  // 将 members 解析为数组
		    } catch (e) {
		      console.error('Failed to parse members:', e);
		    }
			console.log(members);
		    // 使用 for 循环遍历 members 数组，并调用 getUserById 获取每个团员的信息
		    let memberInfo = [];
		    for (let i = 0; i < members.length; i++) {
		      try {
		        const user = await UserAPI.getUserById(members[i]);  // 获取每个成员的信息
		        memberInfo.push(user);  // 将获取的用户信息推入数组
		      } catch (error) {
		        console.error(`Failed to fetch user with ID ${members[i]}:`, error);
		      }
		    }
		
		    console.log('All member information:', memberInfo);
		    // 将所有团员名字拼接成一个字符串
		    let message = `[团长] ${this.leaderInfo.username} <br>[团长电话]${this.leaderInfo.phoneNumber}`;
			for (let i=0;i<memberInfo.length;i++){
				message += `<br><br>[团员${i+1}] ${memberInfo[i].username} <br>[团员${i+1}电话]${memberInfo[i].phoneNumber}`;
			}
			message+="<br>【提醒】点击电话号码可以直接拨号"
		    // 发送消息
		    this.sendMessage(3,message);
		  }
    },
  },
};
</script>

<style scoped>
.chat-input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  bottom: 0;  /* 固定在屏幕底部 */
  padding-bottom: env(safe-area-inset-bottom, 10px);  /* 使用底部安全区域的插入值 */
  touch-action: none;
  position: relative; /* 使上拉选项框相对于该容器定位 */
}

.message-input {
  flex: 1;
  padding: 10px; /* 增大内边距 */
  height: 50px; /* 增大输入框高度 */
  border: 1px solid #ccc;
  border-radius: 32px;
  font-size: 16px; /* 字体大小适当增大 */
  line-height: 1.5; /* 调整行高，增强可读性 */
}

.query-button {
  margin-right: 10px; /* 给查询按钮右边添加间距 */
  height: 50px;  /* 让按钮与输入框一样高 */
  padding: 8px 12px;
  background-color: #4CAF50; /* 绿色按钮 */
  color: #fff;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
}

.query-button:active {
  background-color: #45a049;
}

.send-button {
  margin-left: 10px;
  height: 50px;  /* 让按钮与输入框一样高 */
  padding: 8px 12px;
  background-color: #ec5f5f;
  color: #fff;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  display: flex;
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
  font-size: 16px; /* 确保字体大小一致 */
}

.send-button:active {
  background-color: #9f4040;
}

/* 上拉选项框样式 */
.options-box {
  position: absolute;
  bottom: 70px;  /* 在输入框和发送按钮上方 */
  left: 0;
  width: 80%;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease-in-out;
}

.option-button {
  width: 100%;
  padding: 12px;
  background-color: #f0f0f0;
  border: none;
  border-top: 1px solid #ccc;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.option-button:hover {
  background-color: #ddd;
}

.option-button:active {
  background-color: #ccc;
}
</style>
